<template>
  <div class="wp">
            <!-- 头部 -->
        <div class="Stop">
            <div class="StopO">
                <!-- <i @click="Sbackto()" class="Stfan"></i> -->
                <p class="StopOne">购物车</p>
                <p class="Stopmsg">编辑</p>
            </div> 
           
        </div>
    <!-- 内容部分 -->
    <div class="Scon">
      <!-- banner -->
      <div class="ban">
        <img class="Sconi" src="../../assets/user/g-ban1.png" alt="">
        <div class="Scont">
          <div class="Sconte">
            分享送豪礼
          </div>
          <div class="Sconten">
            去分享
            <i class="Scontent"></i>
          </div>
        </div>
      </div>
      <!-- main -->
      <div >
        <ul v-for="(item,index) in goods" :key="index" class="Smainco">
              <!-- 1 -->
              <li class="Sm">
                <i class="Sma" @click="changei(index)" :class="{'Sma1':flage[index]}"></i>
                <span class="Smain">
                {{til[index]}}
                </span>
              </li>
              <li class="Smainc" v-for="(it,i) in item" :key="i">
                <i class="Sma" @click="changeim(index,i)" :class="{'Sma1':dx[index][i]}"></i>
                <img class="Smaincon" :src='it.src' alt="商品图片">
                <div class="Smaincone">
                  <p class="Smaintop">
                  {{it.title}}
                </p>
                <p class="Smc">
                  规格：{{it.gg}}
                </p>
                <p class="Smco">
                  ￥
                  <span>{{it.money}}</span>
                </p>
                </div>
                <div class="SmainR">
                  <div class="SmainRi" @click="changejian(index,i)">-</div>
                  {{it.num}}
                  <div class="SmainRi" @click="changejia(index,i)">+</div>
                </div>
              </li>
              <li class="Smainto">
                <img class="Smaince" src="../../assets/user/wjian.png" alt="">
                <div class="Smaincen">
                商品金额
                </div>
                <div class="Smaincr">
                  ￥
                  <span>{{p[index]}}</span>
                </div>
              </li>
              <li class="Smainto">
                <div class="Smaincen">
                  综合税总额
                </div>
                <div class="Smaincr">
                  ￥
                  <span>{{shui[index]}}</span>
                </div>
              </li>
              <li class="Smainto">
                <div class="Smaincen">
                  应付总金额
                </div>
                <div class="Smaincr">
                  ￥
                  <span>{{endm[index]}}</span>
                </div>
              </li>
              <li class="Smain1">
                <div class="Smainb"  @click="settlement(index)">
                  <p>结算</p>
                  <p>({{count[index]}})</p>
                </div>
              </li>
        </ul>
        <ul class="Smainco2">
              <li class="Sm">
                <span class="Smainl">
                  <i class="Smainlo"></i>
                  失效商品
                </span>
              </li>
              <li class="Sleft" v-if="falg">
                <img class="Smaincon Smainright" src="../../assets/user/g-san.png" alt="">
                <div class="Smaincone">
                  <p class="Smaintop">
                  会呼吸丝滑蜜粉
                </p>
                <p class="Smc">
                  规格：蜜粉
                </p>
                <p class="Smc">
                  综合税：0.2%
                </p>
                <p class="Smco">
                  ￥
                  <span>166.06</span>
                  <span class="Shui">X1件</span>
                </p>
                </div>
              </li>
              <li class="Smain1 Smain2">
                <div class="Smainbo" @click="changexc()">
                  <p>消除失效商品</p>
                </div>
              </li>
        </ul>
        <ul class="Slike">
          <li class="Sliketop">
                <i class="Sliketopline"></i>
                <span class="Slikew">猜你喜欢</span>
                <i class="Sliketopline"></i>
          </li>
          <li>
            <!-- 二维数组 -->
            <ul class="Slikemain" v-for="(item,index) in like" :key="index">
              <li v-for="(it,i) in item" :key="i">
                <template v-if="i==0">
                  <div >
                    <img :src="it.src" alt="">
                  </div>
                  <div>
                    {{it.zi}}
                  </div>
                  <p class="Slikered">￥{{it.money}}</p>
                  </template>
                  <template v-if="i>0">
                    <div class="Sline">
                      <img :src="it.src" alt="">
                    </div>
                    <div>
                      {{it.zi}}
                    </div>
                    <p class="Slikered">￥{{it.money}}</p>
                  </template>
                </li>
              </ul> 
            </li> 
          <li>
            <a class="Sjiazai" href="###" @click="change1()">加载更多</a>
            <a class="Sjiazai" v-if="jia" href="###" @click="change1()">亲，已经到底了哦</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <Footer/>
  </div>
</template>

<script>
import Footer from '../ma/footer';
export default {
    name:'Shoppings',
     data(){
      return{
        // 底部切换
        arr:this.$store.state.arr,
        til:this.$store.state.sort,
        // 按钮
        flage:[],
        jia:false,
        // 商品
        goods:this.$store.state.some,
        // 猜你喜欢
        like:this.$store.state.like,
        dx:[[],[]],
        count:[],
        p:[],
        shui:[],
        endm:[],
        falg:true
      }
    },
    methods:{
      change1(){
        this.jia = !this.jia;
      },
      // 消除
      changexc(){
        this.falg = !this.falg;
      },
      // 按钮
      // 全选
      changei(index){
        this.flage[index] = !this.flage[index];
        if(this.flage[index]){
          for (var i = 0; i < this.goods[index].length; i++) {
         this.$set(this.dx[index],i,true);
          }
        }else{
          for (var j = 0; j < this.goods[index].length; j++) {
         this.$set(this.dx[index],j,false);
          }
        }
        this.price();
      },
      // 单选
      changeim(index,v){
        this.$set(this.dx[index],v,!this.dx[index][v]);
        this.count[index]=0;
           for (let j = 0; j < this.dx[index].length; j++) {
            if(!this.dx[index][j]){
             this.count[index]++;
           }  
         }
          console.log(this.count[index]);
         if(this.count[index]==this.dx[index].length){
             this.flage[index] = false;
           }else{
             this.flage[index] = true;
           }
           this.price();
      },
      fin(){
        for (var i = 0; i < this.goods.length; i++) {
          this.flage[i] = false;
          for(var j=0;j<this.goods[i].length;j++){
            this.$set(this.dx[i],j,false);
          }         
        }
        this.res();
        this.price();
      },
      // 减
      changejian(index,x){
        if(this.dx[index][x] == false){
          this.goods[index][x].num--;
          if(this.goods[index][x].num<=1){
            this.goods[index][x].num = 1;
          }
          this.$store.state.some[index][x].num = this.goods[index][x].num;
          this.price();
        }
      },
      // 加
      changejia(index,x){
        if(this.dx[index][x] == false){
          this.goods[index][x].num++;
          this.$store.state.some[index][x].num = this.goods[index][x].num;
          this.price();
        }
      },
      // 价格
      res(){
        for (let i = 0; i < this.dx.length; i++) {
          this.p[i] = 0;
          this.shui[i] = 0;
          this.endm[i] = 0;
          this.count[i] = 0;
        }
      },
      price(){
        this.res();
        var endms=0,
            ps=0,
            shuis=0;
        for(let i=0;i<this.dx.length;i++){
          for (let j = 0; j < this.dx[i].length; j++) {
            if(!this.dx[i][j]){
              ps+= this.goods[i][j].money*this.goods[i][j].num; 
              this.p[i] = ps.toFixed(2);
              shuis += this.goods[i][j].tax*this.goods[i][j].num;
              this.shui[i] = shuis.toFixed(2); 
              endms =this.p[i] -this.shui[i];
              this.endm[i] = endms.toFixed(2);
              this.count[i]++;
            }
          }
        }
      },
      // 结算
      settlement(v){
        switch (v) {
          case 0:
            this.$router.replace('/strue');
            break;
          case 1:
            break;
        }
      }
    },
    mounted(){
      this.fin();
    },
    components:{
      Footer
    }
}
</script>

<style  scoped>
.wp {
  overflow: hidden;
}
/* 头部 */
.Stop {
    background-color: #e53e42;
    width: 100%;
    height: 9.6rem;
    color: #fff;
    font-size: 3.6rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.StopO {
    height:9.6rem;
    padding: 0 2rem;
    line-height: 9.6rem;
    text-align: left;
}
.StopOne {
    position: absolute;
    z-index: 2;
    top: 50%;
    margin-top: -4.8rem;
    left: 50%;
    margin-left: -9.4rem;
}
.Stopmsg {
    position: absolute;
    right: 2rem;
    top: 0;
    top: 2rem;
    margin-top: -1.9rem;
    line-height:9.6rem ;
}

/* 内容部分 */
.Scon {
  margin-top:10rem;
}
.ban {
  position: relative;
}
.Sconi {
  width: 100%;
}
.Scont {
  position: absolute;
  right: 1.9rem;
  padding: 0 0.7rem;
  top: 5rem;
} 
/* 红字 */
.Sconte {
  height: 4rem;
  width: 20.6rem;
  line-height: 4rem;
  background: #e53e42;
  font-size: 2.8rem;
  color: #fff;
  text-align: left;
  box-shadow: 0.3rem 0.4rem 0 0 #781114;
}
/* 分享 */
.Sconten {
  width: 12rem;
  height: 4rem;
  line-height: 4rem;
  background: #fff;
  font-size: 2.4rem;
  margin-top: 0.5rem;
  color: #808080;
}
/* > */
.Scontent {
  display: inline-block;
  width: 1.34rem;
  height: 1.34rem;
  border-top: 0.2rem solid #666;
  border-right: 0.2rem solid #666;
  transform: rotate(45deg) translateY(-0.3rem);
}
/* main */
.Smainco {
  text-align: left;
  font-size: 2.8rem;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #ccc; 
  background: #fff;
  color: #4d4d4d;
  margin-bottom: 2rem;
}
.Smainco2 {
  text-align: left;
  font-size: 2.8rem;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #ccc; 
  background: #fff;
  color: #4d4d4d;
  margin-top: 2rem;
}
.Sm {
  height: 8.1rem;
  line-height: 8.1rem;
  padding: 0 2rem;
  border-top: 1px solid #cccccc;
} 
.Smaincon {
  margin:0 1.9rem 0 6.2rem;
}
.Smainright {
  margin-right: 3.2rem;
}
.Smaincone {
  display: flex;
  flex-direction: column;
  justify-self: start;
  margin-right: 10.9rem;
}
.SmainR {
  display: flex;
  flex-direction: row;
  margin-top: 4.7rem;
  height: 4.8rem;
  width: 15.2rem;
  border: 1px solid #cccccc;
  justify-content: space-between;
  align-items: center;
  line-height: 4.8rem;
  border-radius: 10rem;
  font-size: 2.4rem;
  color: #4d4d4d;
  padding: 0 0.4rem;
}
.Smc {
  color: #8c8c8c;
}
.Smco {
  margin-top: 2rem;
  color: #e53e42;
}
.SmainRi {
  border: 1px solid #9b9b9b;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  text-align: center;
  line-height: 4rem;
  font-size: 3.6rem;
}
.Smainto {
  padding: 3.7rem 2rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: 2.8rem;
  border-top: 1px solid #cccccc;
}
.Smaince {
  width: 2.2rem;
  height: 2.4rem;
  margin-left: 8.2rem;
  position: absolute;
  top: -0.1rem;
}
.Smaincen {
  padding-left: 5.1rem;
}
.Smaincr {
  color: #e53e42;
}
.Smain1 {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: row-reverse;
  font-size: 2.8rem;
  border-top: 1px solid #cccccc;
}
.Smain2 {
  flex-direction: row;
  justify-content: center;
}
.Smainb {
  background: #e53e42;
  color: #fff;
  border-radius: 5rem;
  display: flex;
  width: 10.6rem;
  height: 4.8rem;
  line-height: 4.8rem;
  justify-content: space-evenly;
  padding: 0 1.7rem;
} 
.Smainbo {
  border: 1px solid #cccccc;
  color: #4d4d4d;
  border-radius: 5rem;
  display: flex;
  width: 29.8rem;
  height: 4.4rem;
  line-height: 4.4rem;
  justify-content: center;
}
.Smaintop {
  margin-bottom:3rem 0 1rem 0;
}
/* 按钮 */
.Sma {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  vertical-align: middle;
  background: url(../../assets/user/g-gui.png) 0 0;
  margin-top: -1rem;
  border-radius: 50%;
  color: #4d4d4d;
}
.Sma1 {
  background: url(../../assets/user/g-gui.png) no-repeat -3.6rem 0;
}
/* 文字 */
.Smain {
  padding: 0.6rem 0 0.3rem 6rem;
  background: url(../../assets/user/g-che-fei.png) no-repeat -4rem 0.2rem;
}
.Smainl {
  padding: 0.6rem 0 0.3rem 2.2rem;
}
.Smainlo {
  display: inline-block;
  width: 3.8rem;
  height: 3.8rem;
  background: url(../../assets/user/g-che-fei.png) no-repeat 0 0;
  padding-top: 1rem;
  vertical-align: middle;
}
.Shui {
  color: #808080;
  margin-left: 3.4rem;
}  
/* 商品 */
.Smainc {
  height: 20rem;
  line-height: 3.4rem;
  padding: 0 2rem;
  border-top: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
} 
.Smaint {
  height: 10rem;
  border-top: 1px solid #cccccc;
}
.Sleft {
  height: 20rem;
  line-height: 3.4rem;
  padding: 0 2rem;
  border-top: 1px solid #cccccc;
  display: flex;
  align-items: center;
} 
/* 猜你喜欢 */
.Slike {
  background: #fff;
  font-size: 2.4rem;
  margin-top: 2rem;
  border: 1px solid #cccccc;
  color: #4d4d4d;
  padding:0 2rem 22.2rem 2rem;
}
.Sliketop {
  font-size: 3rem;
  padding: 1.2rem 0 2.5rem 0;
}
.Sliketopline {
  display: inline-block;
  width: 6rem;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.Slikew {
  display: inline-block;
  margin: 0 1.5rem;
}
.Slikemain {
  display: flex;
  justify-content: space-around;
  margin: 2.5rem 0;
}
.Slikemainline {
  height: 17rem;
  border: 1px solid #ccc;
}
.Slikered {
  color: #e83d41;
}
.Sjiazai {
  color: #808080;
}
.Sline {
  height: 15.5rem;
  width: 0;
  border-left: 0.2rem solid #ccc;
  padding-left: 4rem;
  margin-left: -2rem;
}
/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;
}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
}
.w-xfoot ul li:nth-child(1) .a1{
  background: url(../../assets/user/bottom1.png) no-repeat -5.6rem 0;
}
.w-xfoot ul li:nth-child(2) .a2{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) .a3{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul li:nth-child(4) .a4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul li:nth-child(5) .a5{
  background: url(../../assets/user/bottom5.png) no-repeat -5.8rem 0;
}
/* 底部 */
/* list2 */
.w-xfoot ul .w-list2{
  background: url(../../assets/user/bottom1.png) no-repeat 0 0;
}
.w-xfoot ul .w-list3{
  background: url(../../assets/user/bottom2.png) no-repeat 0 0;
}
.w-xfoot ul .w-list4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat 0 0;
}
.w-xfoot ul .w-list5{
  background: url(../../assets/user/bottom5.png) no-repeat 0.2rem 0;
}

</style>